<template>
  <div class='wrap'>
    <div class='container w'>
       <div class="goods clearfix">
        <div class="list" v-for="(item, index) in data" :key="index">
          <div class="img">
            <a href="#" target="_blank">
              <img :src="item.goodPicture" alt="" />
              <div class="right-top"><i class="el-icon-delete"></i></div>
            </a>
          </div>
          <div class="goodsName">
            <p class="goods_title">
              <a href="#" target="_blank">{{ item.goodsName }} </a>
            </p>
            <p class="info">
              <span class="price left">￥{{ item.goodPrice }}</span>
              <span class="right">{{ item.like }}人感兴趣</span>
            </p>
          </div>
        </div>
      </div>
    </div>
   </div>
</template>

<script>
  export default {
    name: 'GoodsDelete',
    components: {},
    props: {
      data: {
        type: Array,
        required: true,
        default: ()=> {
        return []
      }
      }
    },
    data() {
      return {
        
      };
    },
    created() {},
    methods: {}, 
  };
</script>
<style lang="scss" scoped>
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  a {
    color: #545c63;
    font-size: 14.5px;
  }
}
// 每一行的最后一个元素不设置右边距
.list:not(:nth-child(5n)) {
  margin-right: 25px;
}
.list:last-child:nth-child(5n - 1) {
  margin-right: calc(220px + 25px);
}
.list:last-child:nth-child(5n - 2) {
  margin-right: calc(220px + 220px + 25px + 25px);
}
.list:last-child:nth-child(5n - 3) {
  margin-right: calc(220px + 220px + 220px + 25px + 25px + 25px);
}
 .list:hover{
   .img{
     .right-top{
       display: inline;
     }
   }
   box-shadow: 0 3px 15px 0 rgba(38, 146, 223, 0.3);
  }
.list {
  // margin:0 15px;
  width: 220px;
  margin-bottom: 22px;
  // box-shadow: 0 3px 5px 0 rgba(95, 101, 105, 0.15);
  box-shadow: 0 3px 10px 0 rgba(152, 208, 248, 0.3);
  border-radius: 8px;

  // box-shadow: 0px 0px 2px #dddddd;
  // transition: all 0.2s linear;
  .img {
    position: relative;
    overflow: hidden;
    img {
      width: 100%;
      border-radius: 8px 8px 0 0;
    }
    .right-top {
      position: absolute;
      cursor: pointer;
      top: 0;
      right: 0;
      padding: 6px;
      color: #fff;
      border-radius: 0px 8px 0px 8px;
      background-color: rgba(38, 39, 40, 0.5);
      box-shadow: 0 3px 10px 0 rgba(44, 85, 209, 0.3);
      display: none;
      i {
        font-size: 18px;
      }
    }
  }
  .goodsName {
    background: #fbfbfb;
    border-radius: 0 0 8px 8px;
    padding: 8px 8px;
    .goods_title {
      // height: 40px;
      overflow: hidden;
      line-height: 20px;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .info {
      display: flex;
      justify-content: space-between;
      margin: 15px 0 6px 0;
      font-size: 14px;
      color: #9199a1;
      .price {
        color: red;
      }
    }
  }
}
</style>